<template>
  <div class="box">
    <div class="inside">
      <div class="title">
        <h4>全国热榜</h4>
        <h4>各省热销</h4>
        <span>// 近30日 //</span>
      </div>
      <div class="content">
        <div class="top">
          <ul class="item-list">
            <li><i class="icon-cup1" style="color: #d93f36"></i>可爱多</li>
            <li><i class="icon-cup2" style="color: #68d8fe"></i>娃哈啥</li>
            <li><i class="icon-cup3" style="color: 4c9bfd"></i>喜之郎</li>
          </ul>
        </div>
        <div class="top-data"  @mouseenter="mouse" @mouseleave="this.voluntarily">
          <ul>
            <li v-for="(obj, index) in hotData" :key="index" :style="elIndex === index ? 'background-color: #021238;' : '' " @mouseenter="cutFn(obj.brands, index)">
              {{ obj.city}}<span
                >{{obj.sales}}<s :class="obj.flag ? 'icon-up' : 'icon-down'" :style="obj.flag ? 'color: #dc3c33' : 'color: #52fff3'"></s></span>
            </li>
          </ul>
          <ul class="data">
            <li v-for="(obj, index) in objItem" :key="index">
              {{obj.name}}<span
                >{{obj.num}}<s :class="obj.flag ? 'icon-up' : 'icon-down'" :style="obj.flag ? 'color: #dc3c33' : 'color: #52fff3'"></s></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EchratToplist',

  data () {
    return {
      hotData: [
        {
          city: '北京', // 城市
          sales: '25, 179', // 销售额
          flag: true, //  上升还是下降
          brands: [ //  品牌种类数据
            { name: '可爱多', num: '9,086', flag: true },
            { name: '娃哈哈', num: '8,341', flag: true },
            { name: '喜之郎', num: '7,407', flag: false },
            { name: '八喜', num: '6,080', flag: false },
            { name: '小洋人', num: '6,724', flag: false },
            { name: '好多鱼', num: '2,170', flag: true }
          ]
        },
        {
          city: '河北',
          sales: '23,252',
          flag: false,
          brands: [
            { name: '可爱多', num: '3,457', flag: false },
            { name: '娃哈哈', num: '2,124', flag: true },
            { name: '喜之郎', num: '8,907', flag: false },
            { name: '八喜', num: '6,080', flag: true },
            { name: '小洋人', num: '1,724', flag: false },
            { name: '好多鱼', num: '1,170', flag: false }
          ]
        },
        {
          city: '上海',
          sales: '20,760',
          flag: true,
          brands: [
            { name: '可爱多', num: '2,345', flag: true },
            { name: '娃哈哈', num: '7,109', flag: true },
            { name: '喜之郎', num: '3,701', flag: false },
            { name: '八喜', num: '6,080', flag: false },
            { name: '小洋人', num: '2,724', flag: false },
            { name: '好多鱼', num: '2,998', flag: true }
          ]
        },
        {
          city: '江苏',
          sales: '23,252',
          flag: false,
          brands: [
            { name: '可爱多', num: '2,156', flag: false },
            { name: '娃哈哈', num: '2,456', flag: true },
            { name: '喜之郎', num: '9,737', flag: true },
            { name: '八喜', num: '2,080', flag: true },
            { name: '小洋人', num: '8,724', flag: true },
            { name: '好多鱼', num: '1,770', flag: false }
          ]
        },
        {
          city: '山东',
          sales: '20,760',
          flag: true,
          brands: [
            { name: '可爱多', num: '9,567', flag: true },
            { name: '娃哈哈', num: '2,345', flag: false },
            { name: '喜之郎', num: '9,037', flag: false },
            { name: '八喜', num: '1,080', flag: true },
            { name: '小洋人', num: '4,724', flag: false },
            { name: '好多鱼', num: '9,999', flag: true }
          ]
        }
      ],
      objItem: [], // 遍历的每个对象中的销售数据
      elIndex: 0, // li背景色状态
      time: null // 定时器
    }
  },
  mounted () {
    this.voluntarily()
    this.cutFn(this.hotData[0].brands, 0)
  },

  methods: {
    // 点击 -> 切换数据
    cutFn (obj, index) {
      this.objItem = obj
      this.elIndex = index
    },
    // 自动切换
    voluntarily () {
      this.time = setInterval(() => {
        this.cutFn(this.hotData[this.elIndex].brands, this.elIndex)
        this.elIndex++
        if (this.elIndex >= this.hotData.length) this.elIndex = 0
      }, 2000)
    },
    // 鼠标移动到数据暂停切换
    mouse () {
      clearInterval(this.time)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 140px;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  span {
    font-size: 14px;
    color: #0bace6;
  }
  .content {
    margin-left: 10px;
    height: 180px;
    display: flex;
    align-content: center;
    margin-right: 75px;
    .item-list {
      height: 100%;
      display: flex;
      width: 190px;
      margin-top: -5px;
      flex-direction: column;
      justify-content: space-around;
      li {
        font-size: 14px;
        color: #4c9bfd;
        i {
          font-size: 36px;
          margin-right: 20px;
          vertical-align: middle;
        }
      }
    }
    .top-data {
      display: flex;
      flex: 1;
      ul {
        flex: 1;
        li {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        line-height: 34px;
        color: #4c9bfd;
        font-size: 14px;
        white-space:nowrap;
        span {
          text-align: center;
          margin-left: 30px;
          color: #4c9bfd;
        }
        s {
          display: inline-block;
          font-size: 10px;
          margin-left: 5px;
          vertical-align: 1px;
        }
      }
      }
      .data {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 5px 0;
        background-color: #04153c;
        margin-bottom: 15px;
        li {
          font-size: 12px;
          line-height: 25px;
          color: #52fff3;
          span {
            color: #52fff3;
            s {
               transform: scale(0.8);
            }
          }
        }
      }
    }
  }
}

</style>
